const todolist = [{
    id:123,
    title:'上班打卡',
    status:'Waiting'
},
    {
        id:124,
        title:'饿了打饭',
    status:'Doing'
},
    {
        id:125,
        title:'困了打盹',
    status:'Finished'
},]
const myUL = document.getElementById('myUL');
const addBtn = document.getElementById('addBtn');
const muInput = document.getElementById('myInput')
let status = "全部"

const showList = ()=>{
    myUL.innerHTML = "";
    const list =todolist.filter(todo=>status==="全部"| todo.status===status)

    list.forEach((todo,index) =>{
        const li =
            `<li id="${index}"> <span class="${todo.status}">${todo.status}</span> | ${todo.title}<span id="$(todo.id)" class="close"></span></li>`
        myUL.innerHTML+=li;
    })
    const spans = document.querySelectorAll("#myUL li span");
    spans.forEach(span =>{
        span.onclick= _ =>{
            const index = todolist.findIndex(todo =>todo.id===span.id)
            todolist.splice(index,1);
            showList();
        }
    })
    const lis = document.querySelectorAll("#myUL li");
    lis.forEach(li =>{
        li.onclick = e=>{
            const todo = todolist[parseInt(li.id)];
            if (todo.status ==='Waiting'){
                todo.status='Doing'
            }
            else if (todo.status==='Doing'){
                todo.status = 'Finished'
            }
            showList();
        }
    })


}
(_=>{
    addBtn.onclick= e =>{
        if (!muInput.value||muInput.value===''){
            alert('工作内容必填')
        }
        const todo = {
            id:new Date().getTime(),
            title:muInput.value,
            status:'Waiting'
        }
        todolist.unshift(todo);
        showList();
    }

    const radios = document.querySelectorAll("#radio-status input")
    radios.forEach(radio=>{
        radios.onclick= e=>{
           status = e.target.value
            showList();
        }
    })
    showList();

})()